<template>
    <div>
        <!-- 专题 -->
        <div class="subject" v-for="v in subjectList" :key="v.id" v-lazy="v.scene_pic_url">
            <img :src="v.scene_pic_url" width="100%" alt="">
            <div class="title">{{v.title}}</div>
            <div class="tip">{{v.subtitle}}</div>
            <div class="price">￥ {{v.price_info.toFixed(2)}} 元起</div>
        </div>
        <!-- /专题 -->
        <!-- 分页 -->
        <van-pagination  v-model="currentPage" :total-items="20" />
        <!-- /分页 -->
    </div>
</template>

<script>
import {Subject} from "@/request/subject.js"
import { Toast } from 'vant';
export default {
    name: 'Wjm0714Subject',

    data() {
        return {
            subjectList:[],
            currentPage:1
        };
    },

    watch:{
        currentPage(newval,oldval){
            Subject(newval,10).then(res=>{
            this.subjectList = res.data.data.data
            scrollTo(0, 0);
            })
            .catch(err=>{
                console.log(err);
            })
        },
        immediate:true,
    },

    created(){
        // 加载
        Toast.loading({
        message: '加载中...',
        forbidClick: true,
        loadingType: 'spinner',
        });
        Subject().then(res=>{
            this.subjectList = res.data.data.data
        })
        .catch(err=>{
            console.log(err);
        })
    },
};
</script>

<style lang="less">
    .subject{
        width: 100%;
        background-color: #fff  ;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        margin-bottom: .2rem;
        font-family: 黑体;
        .title{
            height: .4rem;
            line-height: .4rem;
            font-size: .18rem;
        }
        .tip{
            text-align: center;
            width: 100%;
            height: .4rem;
            line-height: .4rem;
            font-size: .16rem;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .price{
            font-size: .14rem;
            height: .3rem;
            line-height: .3rem;
            color: #9b0000;
        }
    }
    // 隐藏分页数字
    .van-pagination__page{
        display: none;
    }
    // 分页颜色
    .van-pagination__item{
        color: #8b0000;
    }
    .van-pagination__item--disabled{
        color: #333;
    }
</style>